<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>垃圾分类查询</title>
    <link href="<%=path%>/static/css/all.css?3iferrioi" rel="stylesheet" type="text/css">
    <script src="<%=path%>/static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="<%=path%>/backstatic/h-ui.admin/js/H-ui.admin.js"></script>
    <script type="text/javascript" src="<%=path%>/backstatic/lib/layer/2.4/layer.js"></script>
</head>
<body>
<header>
    <jsp:include page="/web/inc/header"/>
</header>
<section>
    <div class="wrap">
        <div id="seach">
            <div id="logo"><a href="http://fenlicx.qinglab.cn" title="垃圾分类查询">分类查询</a></div>
            <div style="width: 150px;float: right;margin-top: 60px;"  class="back">
                <a style="cursor:pointer;float: right;font-size: 20px;font-weight: 700;color: #0a6999" onclick="history.go(-1)" > << 返回上一级 </a>
            </div>
        </div>
        <nav>
            <div class="title">
                <h1>${requestScope.garbage.name}</h1>
                <span>所在地区</span>
                <span>山东/青岛</span>
            </div>
            <div id="breadcrumb">
                <ul>
                    <h3>
                        <li>
                            <a href="result?typeId=${requestScope.garbage.garbageType.id}">${requestScope.garbage.garbageType.title}</a><span>></span>
                        </li>
                        <c:if test="${requestScope.garbage.texture.texture.title eq null}" var="flag"></c:if>
                        <c:if test="${not flag}">
                            <li>
                                <a href="result?typeId=${requestScope.garbage.garbageType.id}&textureId=${requestScope.garbage.texture.texture.id}">${requestScope.garbage.texture.texture.title}</a><span>></span>
                            </li>
                        </c:if>

                        <li>
                            <a href="result?typeId=${requestScope.garbage.garbageType.id}&textureId=${requestScope.garbage.texture.id}">${requestScope.garbage.texture.title}</a><span>></span>
                        </li>
                        <li><a href="#">${requestScope.garbage.name}</a><span>></span></li>
                    </h3>
                </ul>
            </div>
        </nav>
        <article data-name="${requestScope.garbage.texture.id}" data-id="${requestScope.garbage.id}" class="content">
            <div style="height: 200px" class="pic"><img height="100%"
                                                        src="<%=path%>/static/images/${requestScope.garbage.picture}">
            </div>
            <div class="mgs">
                <h4>
                    <span>${requestScope.garbage.garbageType.title}</span>
                    <span>></span>
                    <c:if test="${requestScope.garbage.texture.texture.title eq null}" var="flag"></c:if>
                    <c:if test="${not flag}">
                        <span>${requestScope.garbage.texture.texture.title}</span>
                        <span>></span>
                    </c:if>
                    <span>${requestScope.garbage.texture.title}</span>
                    <span>></span>
                    <span>${requestScope.garbage.name}</span>
                </h4>
                <div class="icon">
                    <img src="<%=path%>/static/images/${requestScope.garbage.garbageType.inco}" alt="可回收标志">
                    <c:if test="${requestScope.garbage.texture.texture.title eq null}" var="flag"></c:if>
                    <c:if test="${not flag}">
                        <img src="<%=path%>/static/images/${requestScope.garbage.texture.texture.inco}" alt="纸质回收标志">
                    </c:if>
                    <img src="<%=path%>/static/images/${requestScope.garbage.texture.inco}" alt="纸质回收标志">
                    <img src="<%=path%>/static/images/${requestScope.garbage.picture}" alt="PET材料">
                </div>
                <h3>详细信息</h3>
                <div style="height: 100px;">
                    ${requestScope.garbage.briefInfo}
                </div>
            </div>
            <h3 style="margin-left: 50px" class="region">处理方式（共${requestScope.garbage.solutionCount}条）：</h3>
            <div id="solutionContent">

            </div>
            <div class="cle"></div>
            <div class="sta">
                <div>
                    <h3 style="width: 300px;float: left;"></span>最近三十天统计数据展示：</h3>
                    <div style="height:30px;width: 300px;float: right;margin-top: 0px;">
                    <select  id="provincex">
                        <option value="null">${sessionScope.province}</option>
                        <c:forEach items="${provinces}" var="province">
                            <option value="${province.id}">${province.name}</option>
                        </c:forEach>
                    </select>
                    <select class="cityx">
                        <option value="null">${sessionScope.city}</option>
                    </select>
                    </div>
                </div>
                <ul>
                    <%--<li>--%>
                        <%--<div class="project">产生量：</div>--%>
                        <%--<div class="value">2000吨</div>--%>
                        <%--<div class="project">回收量：</div>--%>
                        <%--<div class="value">2000吨</div>--%>
                        <%--<div class="project">回收率：</div>--%>
                        <%--<div class="value-s">100%</div>--%>
                        <%--<div class="source"><a href="#">青岛市某机构</a></div>--%>
                        <%--<div class="approve">认证信息</div>--%>
                    <%--</li>--%>
                    <li>
                        <div class="project">产生量：</div>
                        <div id="out" class="value">0</div>
                        <div class="project">回收量：</div>
                        <div id="recycle" class="value">0</div>
                        <div class="project">回收率：</div>
                        <div id="rate" class="value-s">0</div>
                        <div class="source">社会信息统计</div>
                    </li>
                </ul>
                <p>目前数据量较少，统计数据参考性低。<a href="javascript:void(0);" onclick="Detail_show('近12个月垃圾回收统计','<%=path%>/web/garbage/dataCharts?id=${requestScope.garbage.id}','10001','650','450') "  > 查看统计详情  </a></p>
            </div>
        </article>
        <article class="article">
            <div class="title">
                <h2>${requestScope.garbage.texture.title}处理方式相关文论</h2>
                <%--<a class="bunt" href="<%=path%>/web/garbage/addSolutionCheck?id=${requestScope.garbage.id}">添加处理方式</a>--%>
                <a class="bunt" href="script:void(0)">添加处理方式</a>
            </div>
            <div id="articleContent">

            </div>
        </article>
    </div>
</section>

<script>

    //处理方式数据初始化，相关文章数据初始化
    var typeId = $(".content").data("id");
    var pageNum = null;
    var textureId = $(".content").data("name");
    var cityId=null;
    var garbageId=null;
    $(function () {
        toAjax();
        initData();
        //对相关文章进行初始化
        function toAjax() {
            $.ajax({
                url: "<%=path%>/web/article/articleListData",
                type: "Get",
                async: false,
                data: {typeId: null, textId: textureId, orderBy: "bytime", pageNum: pageNum},
                success: function (data) {
                    $("#articleContent").html(data);
                }
            });
        };

        //对垃圾处理方式进行初始化
        function initData() {
            $.ajax({
                url: "<%=path%>/web/garbage/solutionData",
                type: "GET",
                async: false,
                data: {id: typeId, pageNum: pageNum},
                success: function (data) {
                    $("#solutionContent").html(data);
                }
            });
        };

        //给垃圾处理方式数据分页加点击事件
        $("#solutionContent").on("click", ".pageList a", function () {
            pageNum = $(this).html();
            initData();
            $(".pageList a[id=" + pageNum + "]").css("background-color", "#87CEEB");
        });

        //给相关文章数据添加分页事件点击
        $("#articleContent").on("click", ".pagination a", function () {
            pageNum = $(this).html();
            toAjax();
            $(".pagination a[id=" + pageNum + "]").css("background-color", "#87CEEB");
        });
    });
    function Detail_show(title,url,id,w,h){
        layer_show(title,url,w,h);
    }

    //打开页面，获得当前城市的名称，根据城市名获得城市id，查询数据
    $(function () {
        var keyword="${sessionScope.city}";
        $.ajax({
            url: "<%=path%>/web/garbage/getIdByCityName",
            type: "POST",
            async: false,
            dataType:"JSON",
            data: {keyword: keyword},
            success: function (JSONdata) {
                cityId=JSONdata.id;
            }
        });
        garbageId=${requestScope.garbage.id};
        findData();
    })

    //对垃圾数据进行更新的方法
    function findData() {
        $.ajax({
            url: "<%=path%>/web/garbage/updateData",
            type: "POST",
            async: false,
            // dataType:"JSON",
            data: {cityId: cityId, id: garbageId},
            success: function (JSONdata) {
                if(JSONdata=="")
                {
                    layer.msg("该城市目前没有近三十天统计数据",{icon:5});
                    return;
                }
                $("#out").html(JSONdata.outData+"吨");
                $("#recycle").html(JSONdata.recycleData+"吨");
                $("#rate").html(JSONdata.percentage);
            }
        });
    };

    //选择城市
    $("#provincex").change(function () {
        var pid=$("#provincex").val();
        $(".cityx").empty();
        $.ajax({
            url:"<%=path%>/web/garbage/findCity",
            type:"GET",
            data:{id:pid},
            success:function (data) {
                $(".cityx").append("<option value='null'>请选择城市</option>");
                $(data).each(function () {
                    $(".cityx").append("<option value="+this.id+">"+this.name+"</option>");
                })
            }
        });

    })

    //根据城市改变数据
    $(".cityx").change(function () {
        cityId=$(this).val();
        findData();
    })

    //点击添加处理方式对用户进行判断
    $(function () {
        $(".bunt").click(function () {
            window.event.returnValue=false;
            var userinforTypeId="${sessionScope.userinfo.userType.id}";
            if(userinforTypeId=="")
            {
                window.location.href="<%=path%>/web/userinfo/login";
            }
            else {
                if(userinforTypeId==2)
                {
                    window.location.href="<%=path%>/web/garbage/addSolution?id=${requestScope.garbage.id}";
                }
                else
                {
                    layer.msg("您没有权限添加数据",{icon:5});
                }
            }

        });
    });

</script>
</div>
<footer><jsp:include page="/web/inc/footer"></jsp:include></footer>
</body>
</html>
